<template>
  <router-link :to="`/articleDetail/${news.id}`" class="news" v-if="news">
    <img :src='news.picture.picFilepath' alt class="news-img"/>
    <div class="news-content">
      <h4 class="news-title">{{news.newsName}}</h4>
      <div class="news-bot">
        <!-- <span class="news-hot">
          <img src="../../assets/img/hot.png" />366
        </span> -->
        <span class="news-info">{{news.releaseTime}} {{ news.bloodStationId == 0 ? '平台资讯' : '浆站资讯'}}</span>
      </div>
    </div>
  </router-link >
</template>

<script>
export default {
  data() {
    return {};
  },
  props:{
    news:{
      required:true
    }
  },
  components: {}
};
</script>

<style lang='scss'>
.news {
  margin-bottom: 0.4rem /* 30/75 */;
  display: flex;
  height: 2.933333rem /* 220/75 */;
  padding: 0.466667rem /* 35/75 */;
  background: #fff;
  border-radius: 0.213333rem /* 16/75 */;
  &-img {
    flex: none;
    width: 2.933333rem /* 220/75 */;
    height: 100%;
    margin-right: 0.4rem /* 30/75 */;
  }
  &-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  &-title {
    font-size: 0.4rem /* 30/75 */;
    color: rgba(51, 51, 51, 1);
    line-height: 0.6rem /* 45/75 */;
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box; 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  &-bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-hot {
    color: #f1404b;
    font-size: 0.32rem /* 24/75 */;
    display: flex;
    align-items: center;
    line-height: 1;
    img {
      width: 0.4rem /* 30/75 */;
      margin-right: 0.133333rem /* 10/75 */;
    }
  }
  &-info {
    color: #bfbfbf;
    font-size: 0.32rem /* 24/75 */;
  }
  .hot {
    width: 0.4rem /* 30/75 */;
  }
}
</style>
